<template>
<div class="pro clearfix" :style="{width: width}">
    <a :href="productDetail.link"  @click.prevent="productItem">
      <img :src="showImage" alt="" @load="imgLoad">
      <p class="product-dec ellipsis">{{productDetail.title}}</p>
      <p class="product-price ellipsis"><span>{{productDetail.price}} </span> <em v-if="productDetail.popularStar">{{productDetail.popularStar}}</em></p>
    </a>
</div>
</template>

<script>
export default {
  name: 'productItem',
  props: {
    productDetail: {
      type: Object,
      default () {
        return {}
      }
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  data () {
    return {

    }
  },
  created () {

  },
  mounted () {

  },
  computed: {
    showImage () {
      return (this.productDetail.show && this.productDetail.show.img) || this.productDetail.image
    }
  },
  methods: {
    imgLoad () {
      // 分发事件
      this.$Bus.$emit('itemImgLoad')
    },
    productItem () {
      // console.log(111)
      this.$router.push({ path: '/productDetail', query: { productId: this.productDetail.iid } })
    }
  }
}
</script>
<style scoped>
/* @import ''; 引入css类 */
.pro {
  float: left;
  margin-top: 9px;
}
img {
  display: block;
  width: 100%;
  /* height: 294px; */
}
p.product-dec {
  padding-top: 7px;
}
p.product-price span {
  color: var(--color-high-text)
}
.pro:nth-child(2n) {
  float: right;
}
</style>
